import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Alert,
    FlatList,
    TextInput,
    Linking,
    Image,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'
import Header from "../../components/header";
import LinearGradient from 'react-native-linear-gradient';


const screenW = Dimensions.get('window').width;

let navigation

export default class LogisticsInfoPop extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentDidMount() {

    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <View style={[styles.logisticsContainer, { paddingBottom: Constant.bottomHeight }]}>
                    <Text style={styles.logisticsTitleText}>物流信息</Text>
                    <View style={[styles.logisticsContainer, { paddingHorizontal: 16 }]}>
                        <View style={styles.logisticsItemBox}>
                            <Text style={styles.logisticsItemTitleText}>姓名</Text>
                            <Text style={styles.logisticsItemDesText}>{this.props.data.carrierName}</Text>
                        </View>
                        <View style={styles.logisticsItemBox}>
                            <Text style={styles.logisticsItemTitleText}>身份证</Text>
                            <Text style={styles.logisticsItemDesText}>{this.props.data.carrierIdCard}</Text>
                        </View>
                        <View style={styles.logisticsItemBox}>
                            <Text style={styles.logisticsItemTitleText}>电话</Text>
                            <TouchableOpacity
                                style={{ flexDirection: 'row', alignItems: 'center' }}
                                onPress={() => {
                                    this.call()
                                }}
                            >
                                <Text style={[styles.logisticsItemDesText, { color: '#FF7B00' }]}>{this.props.data.carrierPhone}</Text>
                                <Image style={styles.phoneImg} source={require('source/image/phone_icon.png')} />
                            </TouchableOpacity>
                        </View>
                        <View style={styles.logisticsItemBox}>
                            <Text style={styles.logisticsItemTitleText}>车牌号</Text>
                            <Text style={styles.logisticsItemDesText}>{this.props.data.carrierPlate}</Text>
                        </View>
                        <View style={[styles.logisticsItemBox, { borderBottomWidth: 0 }]}>
                            <Text style={styles.logisticsItemTitleText}>板车类型</Text>
                            <Text style={styles.logisticsItemDesText}>{this.props.data.carrierType}</Text>
                        </View>
                    </View>
                    <View style={styles.sepLine} />
                    <TouchableOpacity
                        style={styles.cancelBtn}
                        onPress={() => {
                            if (this.props.cancelHandler) {
                                this.props.cancelHandler()
                            }
                        }}
                    >
                        <Text style={styles.cancelText}>取消</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    call() {
        const url = `tel:${this.props.data.carrierPhone}`;
        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                return Alert.alert('提示', `您的设备不支持该功能，请手动拨打 ${this.props.data.carrierPhone}`, [
                    { text: '确定' }
                ]);
            }
            return Linking.openURL(url);
        }).catch(err => Alert(err));
    }


}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1000,
        backgroundColor: 'rgba(0,0,0,0.4)',
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'flex-end'
    },
    logisticsContainer: {
        width: '100%',
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center'
    },
    logisticsTitleText: {
        marginVertical: 18,
        fontSize: 16,
        fontWeight: '500',
        color: '#333'
    },
    logisticsItemBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        height: 54,
        borderBlockColor: '#E4E4E4',
        borderBottomWidth: 0.3
    },
    logisticsItemTitleText: {
        fontSize: 14,
        color: '#333333'
    },
    logisticsItemDesText: {
        fontSize: 14,
        color: '#333333',
        fontWeight: '500'
    },
    phoneImg: {
        width: 22,
        height: 22,
        marginLeft: 4,
    },
    sepLine: {
        width: '100%',
        height: 10,
        backgroundColor: '#F3F3F3'
    },
    cancelBtn: {
        width: '100%',
        height: 48,
        alignItems: 'center',
        justifyContent: 'center'
    },
    cancelText: {
        fontSize: 16,
        color: '#333333'
    }

})